<script setup>
  import { onMounted, ref } from 'vue'
  import {
    addPatientApi,
    patientDetailApi,
    updatePatientApi
  } from '@/services/inquiry.js'
  const isDefault = ref([0])
  const formRef = ref(null)
  const prors = defineProps({
    id: {
      type: String
    }
  })
  onMounted(() => {
    if (prors.id) {
      uni.setNavigationBarTitle({
        title: '编辑患者'
      })
      getPatientDetail()
    }
  })
  const getPatientDetail = async () => {
    const {
      data: { data }
    } = await patientDetailApi(prors.id)
    Object.keys(formData.value).forEach((key) => {
      formData.value[key] && (formData.value[key] = data[key])
    })
  }
  // 表单数据
  const formData = ref({
    name: '张三',
    idCard: '110101197806108758',
    gender: 1,
    defaultFlag: 1
  })
  // 表单验证规则
  const formRules = {
    name: {
      rules: [
        { required: true, errorMessage: '请填写患者姓名' },
        {
          pattern: '^[\u4e00-\u9fa5]{2,5}$',
          errorMessage: '患者姓名为2-5位中文'
        }
      ]
    },
    idCard: {
      rules: [
        { required: true, errorMessage: '请输入身份证号' },
        {
          pattern:
            '^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
          errorMessage: '身份证号格式不正确'
        }
      ]
    },
    gender: {
      rules: [
        { required: true, errorMessage: '请勾选患者姓名' },
        {
          validateFunction(rule, value, data, callback) {
            // 检测身份证号第17位是否为偶数
            if (data.idCard.slice(16, 17) % 2 !== value) {
              callback('选择的性别与身份号中性别不一致')
            }
            // 验证通过时返回 true
            return true
          }
        }
      ]
    }
  }
  // 是否为默认就诊人
  function onSwitchChange(ev) {
    // 是否设置为默认就诊患人
    console.log(ev.detail.value)
    formData.value.defaultFlag = ev.detail.value ? 1 : 0
  }
  //提交表单
  const onFormSubmit = async () => {
    if (!prors.id) {
      await formRef.value.validate()
      await addPatientApi(formData.value)
    } else {
      await updatePatientApi({ ...formData.value, id: prors.id })
    }
    // 跳转到患者列表页面
    uni.navigateBack()
  }
</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <uni-forms
        border
        label-width="220rpx"
        ref="formRef"
        :model="formData"
        :rules="formRules"
      >
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            v-model="formData.name"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写真实姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            v-model="formData.idCard"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写身份证号"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            selectedColor="#16C2A3"
            v-model="formData.gender"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 }
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="name">
          <!-- <switch
              v-model="formData.defaultFlag"
              :checked="formData.defaultFlag === 1"
              @change="onSwitchChange"
              color="#20c6b2"
              style="transform: scale(0.7)"
            /> -->
          <my-switch
            v-model="formData.defaultFlag"
            :trueValue="1"
            :falseValue="0"
            customStyle="transform: scale(0.7)"
          ></my-switch>
        </uni-forms-item>
        <button class="uni-button" @click="onFormSubmit">保存</button>
      </uni-forms>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
